<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="end">
          <el-button size="small" type="primary" @click="addEmployee(1)">添加员工</el-button>
        </el-row>
        <el-divider />
        <el-table border :data="employeeList" style="width: 100%">
          <el-table-column align="center" prop="username" label="用户名" />
          <el-table-column align="center" prop="email" label="邮箱" />
          <el-table-column align="center" label="操作">
            <template #default="{row}">
              <el-button size="small" type="primary" @click="editEmployee(2,row.id)">设置角色</el-button>
              <el-button size="small" @click="editEmployee(1,row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="margin-top:20px;text-align:center"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="employeeParams._limit"
          :total="total"
          @size-change="SizeChange"
          @current-change="changeCurrent"
        />
        <!-- 弹窗 -->
        <add_Assigne ref="add_Assigne" :is-show-dialog.sync="isShowDialog" @getEmployeeList="getEmployeeList" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEmployeeList, getCount, delEmployee } from '@/api/employee'
import add_Assigne from './components/add_Assigne'
export default {
  components: {
    add_Assigne
  },
  data() {
    return {
      employeeList: [],
      employeeParams: {
        _limit: 5,
        _start: 0
      },
      currentPage: 1,
      total: 0,
      isShowDialog: false

    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    SizeChange(val) {
      this.employeeParams._limit = val
      this.getEmployeeList()
    },
    changeCurrent(val) {
      this.employeeParams._start = (val - 1) * this.employeeParams._limit
      this.currentPage = val
      this.getEmployeeList()
    },
    async getEmployeeList() {
      this.employeeList = await getEmployeeList(this.employeeParams)
      this.total = await getCount()
    },
    async addEmployee(assigne) {
      this.isShowDialog = true
      this.$refs.add_Assigne.isAssigne = assigne
    },
    async editEmployee(assigne, id) {
      this.isShowDialog = true
      await this.$refs.add_Assigne.editEmployee(assigne, id)
    },
    async delEmployee(id) {
      try {
        await this.$confirm('此操作将永久删除, 是否继续?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        await delEmployee(id)
        // 当数组中长度为1同时当前页大于1时，当前页减一，确保当前页的数据都删除后，当前页码后退一页
        if (this.employeeList.length === 1 && this.currentPage > 1) {
          this.employeeParams._start = (this.currentPage - 2) * this.employeeParams._limit
          await this.getEmployeeList()
          this.currentPage--
          return
        }
        this.getEmployeeList()
        this.$message.success({
          message: '删除成功！',
          center: true
        })
      } catch (error) {
        return error
      }
    }
  }
}
</script>

<style>

</style>
